<template>
  <div class="swipe" :style="computedStyle">
    <van-swipe :autoplay="componentData.autoplay ? componentData.autoplayDuration : ''" :duration="componentData.duration" class="van-swipe" :loop="componentData.loop" >
      <van-swipe-item v-for="(item, index) in componentData.imageInfos" :key="index">
        <el-image :src="item.image ? item.image : defaultImage"  lazy/>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>

const defaultImageInfos = {
  image: null,
  jumpLink: '',
  // 1 小程序页面 2 h5页面地址
  linkType: 1
}

const defaultComponentData = {
  margin: null,
  paddingBottom: null,
  paddingLeft: null,
  paddingRight: null,
  paddingTop: null,
  marginBottom: null,
  marginLeft: null,
  marginRight: null,
  marginTop: null,
  sizeUnit: 'px',
  imageInfos: [defaultImageInfos, defaultImageInfos, defaultImageInfos],
  autoplay: true, //	自动轮播间隔，单位为 ms	number | string	-
  autoplayDuration: 3000, //	自动轮播间隔，单位为 ms	number | string	-
  duration: 500, // 动画时长，单位为 ms,
  verticalScroll: true, // 是否为纵向滚动
  loop: true
}

export default {
  name: 'LpSwipe',
  title: '轮播图',
  image: require('./images/blank.png'),
  registerName: 'lp-swipe',
  defaultComponentData: defaultComponentData,
  props: {
    componentData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      defaultImage: require('./images/blank.png')
    }
  },
  computed: {
    computedStyle() {
      const componentData = Object.assign(defaultComponentData, this.componentData)
      const style = {}
      this.addProperty(style, 'width', componentData.width, componentData.sizeUnit)
      this.addProperty(style, 'height', componentData.height, componentData.sizeUnit)
      this.addProperty(style, 'padding', componentData.padding)
      this.addProperty(style, 'margin', componentData.margin)
      this.addProperty(style, 'padding-bottom', componentData.paddingBottom, componentData.sizeUnit)
      this.addProperty(style, 'padding-left', componentData.paddingLeft, componentData.sizeUnit)
      this.addProperty(style, 'padding-right', componentData.paddingRight, componentData.sizeUnit)
      this.addProperty(style, 'padding-top', componentData.paddingTop, componentData.sizeUnit)
      this.addProperty(style, 'margin-bottom', componentData.marginBottom, componentData.sizeUnit)
      this.addProperty(style, 'margin-left', componentData.marginLeft, componentData.sizeUnit)
      this.addProperty(style, 'margin-right', componentData.marginRight, componentData.sizeUnit)
      this.addProperty(style, 'margin-top', componentData.marginTop, componentData.sizeUnit)
      return style
    }
  },
  methods: {

  }
}
</script>
<style scoped>
.default-image {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: #f5f7fa;
  color: #909399;
}

.el-image, image  {
  font-size: 0px;
  display: block;
}
</style>
